<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<link rel="stylesheet" href="../js/bootstrap/dist/css/bootstrap.min.css" />
		<link rel="stylesheet" href="../js/bootstrap/fonts/css/font-awesome.min.css" />
		<link rel="stylesheet" href="../css/global.css" />
		<script src="../js/jquery-3.6.0.min.js"></script>
		<script src="../js/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
		<title>IT门徒</title>
	</head>
	<body>
		<div class="sticky-top">
		<!-- 菜单 -->
		<nav class="menu-box navbar navbar-expand-lg">
		  <a class="navbar-brand" href="#">ITMENTU</a>
		  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
			<i class="trigger menuicon icon-th-large icon-2x"></i>
		  </button>
		  <div class="collapse navbar-collapse">
			<nav class="navbar-nav mr-auto">
			  <a class="nav-link active" href="#">首页</a>
			  <a class="nav-link" href="#">HarmonyOS</a>
			  <a class="nav-link" href="#">Java架构师</a>
			  <a class="nav-link" href="#">面试题</a>
			  <a class="nav-link" href="#">数据库</a>
			  <a class="nav-link" href="#">网站建设</a>
			  <a class="nav-link" href="#">简历</a>
			</nav>
		    <form class="form-inline">
		      <input class="form-control mr-sm-2" type="search" placeholder="输入要找的内容" aria-label="Search">
		      <button class="btn btn-outline-light my-2 my-sm-0" type="submit">搜索</button>
		    </form>
		  </div>
		</nav>
		<div class="slider">
			<div class="input-group searchbox zfbox">
			  <input type="text" class="searchbox form-control" placeholder="搜索">
			  <div class="input-group-append">
				<span class="input-group-text icon-search ioc-searchspan"></span>
			  </div>
			</div>

			<ul class="navbar-nav mr-auto">
			  <li class="nav-item active">
			    <a class="nav-link" href="#">首页</a>
			  </li>
			  <li class="nav-item">
			    <a class="nav-link" href="#">HarmonyOS</a>
			  </li>
			  <li class="nav-item">
			    <a class="nav-link" href="#">Java架构师</a>
			  </li>
			  <li class="nav-item">
			    <a class="nav-link" href="#">面试题</a>
			  </li>
			  <li class="nav-item">
			    <a class="nav-link" href="#">简历下载</a>
			  </li>
			  <li class="nav-item">
			    <a class="nav-link" href="#">数据库</a>
			  </li>
			  <li class="nav-item">
			    <a class="nav-link" href="#">网站建设</a>
			  </li>
			</ul>
		</div>
		</div>
	</body>
</html>
<script type="text/javascript">
	$(function(){
		$(document).bind("click",function(e){
			if($(e.target).attr('class')!=undefined && ($(e.target).attr('class').indexOf('trigger')>=0 || $(e.target).attr('class').indexOf('searchbox')>=0)){
				$(".slider").addClass("mobile-menue-open");
			}else{
				$(".slider").removeClass("mobile-menue-open");
			}
		})
	});
</script>
